import React, { useContext } from "react";
import { Tabs, List, Avatar } from "antd";
import { HomeContext } from "../context";

import img3 from "../image_3.png";
import styles from "./style.module.scss";

export default function Contact(props) {
    const { TabPane } = Tabs;
    const { contact, group } = useContext(HomeContext);
    return (
        <div className={styles.card}>
            <header className={styles.header}>联系人</header>
            <section className={styles.content}>
                <Tabs centered>
                    <TabPane tab="好友列表" key="1">
                        <List
                            className="custom-list"
                            itemLayout="horizontal"
                            dataSource={contact}
                            renderItem={(item) => (
                                <List.Item style={{ padding: "7px 12px" }}>
                                    <List.Item.Meta
                                        avatar={<Avatar size={45} src={img3} />}
                                        title={item.nickname}
                                    />
                                </List.Item>
                            )}
                        />
                    </TabPane>
                    <TabPane tab="群组列表" key="2">
                        <List
                            className="custom-list"
                            itemLayout="horizontal"
                            dataSource={group}
                            renderItem={(item) => (
                                <List.Item style={{ padding: "7px 12px" }}>
                                    <List.Item.Meta
                                        avatar={<Avatar size={45} src={img3} />}
                                        title={item.name}
                                    />
                                </List.Item>
                            )}
                        />
                    </TabPane>
                </Tabs>
            </section>
        </div>
    );
}
